<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <meta charset="UTF-8">
    <title>农村房地一体网络公示平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/js/datatables.min.css">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="assets/js/zepto.min.js?ver=1.1.3"></script>
    <script src="assets/js/handlebars.min.js
"></script>
    <script src="assets/js/amazeui.widgets.helper.js"></script>
    <style>
        .header {
            text-align: center;
        }
        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }
        .header p {
            font-size: 14px;
        }
        .am-header-default .am-header-title{
            margin: 0 0;
        }
        .next-btn{
            width: 100%;
            background: #0e90d2;
            color: #fff;
        }
        .am-modal .am-modal-bd{
            width: 100vw;
            height: 360px;
        }
        .title{
            margin-top: 30px;
        }
        #modalImg{
            width: 100vw;
            height: auto;
            left: 0;
            top: 20px;
            margin-left: 0;
            display: inline-block;
            margin-top: 0!important;
        }
        #modalImg .am-modal-bd{
            width: 100%;
            height: auto;
        }
        .am-header-default .am-header-title{
            margin: 0 0;
        }
        .am-col.am-list-main .am-list-item-hd{

        }
        .next-btn{
            width: 100%;
            background: #0e90d2;
            color: #fff;
        }
        .title{
            margin-top: 30px;
        }
        .am-list-item-desced{
            padding: 0!important;
        }
        .am-list-item-desced .am-list-item-hd{
            float: left;
            width: 30%;
            height: 5rem;
            line-height: 3rem;
            border-right: 1px solid #ddd;
            padding-left: 10px;
        }
        .am-list-item-desced .am-list-item-text{
            line-height: 1.3!important;
            padding-left: 10px;
            height: auto;
        }
        .am-list-news{
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }
        .am-list-news .am-list-news-hd{
            padding: 0;
        }
        .am-list-news .am-list-news-hd h2{
            line-height: 3;
            height: auto;
            width: 30%;
            border-right: 1px solid #ddd;
            padding-left: 10%;
        }
        .am-list-news .am-list-news-hd .am-list-news-more{
            text-align: left;
            float: left;
            margin-left: 30%;
            line-height: 4!important;
        }
        .am-list .am-list-item-desced a, .am-list .am-list-item-thumbed a{
            color: #757575;
        }

        .am-modal{
            left: 0;
            width: 100%;
            height: 600px;
            margin-left: 0;
            margin-top: 0;
            top: 20%;
        }
        #vld-tooltip {
            position: absolute;
            z-index: 1000;
            padding: 5px 10px;
            background: #F37B1D;
            min-width: 150px;
            color: #fff;
            transition: all 0.15s;
            box-shadow: 0 0 5px rgba(0,0,0,.15);
            display: none;
        }

        #vld-tooltip:before {
            position: absolute;
            top: -8px;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -8px;
            content: "";
            border-width: 0 8px 8px;
            border-color: transparent transparent #F37B1D;
            border-style: none inset solid;
        }
        #cylistTable{
            border: 1px solid #ddd;
            margin: 10px 0;
            width: 100%;
        }
        #cylistTable th{
            padding: 10px 5px;
            white-space: nowrap;
            min-width: 100px;
            border-right:1px solid #ddd;
            border-bottom: 1px solid #1111114a;
        }
        #cylistTable th:last-child{
            /*display: inline-block;*/
            box-sizing: border-box;
        }
        #cylistTable td{
            border-right:1px solid #ddd;
        }
        #cylistTable td:last-child{
            /*display: inline-table;*/
            padding: 10px;
        }
        #cylistTable td button{
            float: left;
            padding: .4em 1em;
            border-radius: 2px;
        }
        #cylistTable td button:first-child{
            margin-right:5px;
        }
        #cylistTable_wrapper{
            overflow: auto;
        }
        .dataTables_info{
            display: none;
        }
        .tablecontent{
            width: 100%;
            overflow: auto;
        }
    </style>
    <script src="assets/js/datatables.min.js"></script>
    <script src="assets/js/amazeui2.7.2.js"></script>

</head>
<body>

<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link">农村房地一体网络公示平台</a>
    </h1>
</header>
<div class="am-g">
    <div class="col-lg-6 col-md-10 col-sm-12 col-sm-centered">
        <h2 class="title">2、家庭成员信息</h2>
        <hr>
        <button
                type="button"
                class="am-btn am-btn-primary"
                id="openmodalbtn">
            新增
        </button>
        <div class="tablecontent">
            <table class="am-table" id="cylistTable">
                <thead>
                <tr>
                    <th style='width:80px;'>姓名</th>
                    <th style='width:120px;'>手机号码</th>
                    <th style='width:180px;'>身份证号</th>
                    <th style='min-width:130px;'>操作</th>
                </tr>
                </thead>
                <tbody id="tablebody">
                <tr>
                    <td>暂无数据</td>
                </tr>
                </tbody>
            </table>
        </div>
        <h3>提示：左右滑动表格查看修改家庭成员信息</h3>
        <hr>
        <button  type="button" class="am-btn am-btn-default next-btn" onclick="prePage()" >上一页</button>
        <button  type="button" class="am-btn am-btn-default next-btn" onclick="next()" >下一页</button>
    </div>
</div>

<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
    <div class="am-footer-miscs ">
        <p>
            <a href="#" title="四川省川核测绘地理信息有限公司" target="_blank"></a>Powered by 四川省川核测绘地理信息有限公司</p>
    </div>
</footer>

<!--新增-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-modal">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">新增成员</div>
        <div class="am-modal-bd">
            <form class="am-form am-form-horizontal" action="" id="doc-vld-msg" >
                <fieldset>
                <div class="am-form-group">
                    <label for="jtcyxm" class="am-u-sm-2 am-form-label">姓名</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="jtcyxm" minlength="2" required placeholder="请输入姓名"  data-foolish-msg="请至少输入2个字">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="jtcysfz" class="am-u-sm-2 am-form-label">身份证号</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="jtcysfz" class="js-pattern-jtcysfz" placeholder="请输入身份证号" required data-foolish-msg="请输入正确的身份证号">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="jtcydh" class="am-u-sm-2 am-form-label">电话号码</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="jtcydh" class="js-pattern-mobile" required placeholder="请输入电话号码" data-foolish-msg="请输入正确的电话号码">
                    </div>
                </div>
                <div class="am-form-group">
                    <div class="am-u-sm-10 am-u-sm-offset-2">
                        <button class="am-btn am-btn-default btn-loading" type="submit" data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '确定'}">确定</button>
                        <button class="am-btn am-btn-default" onclick="closeModal(event)">取消</button>
                    </div>
                </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<!--更新-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-modal-update">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">修改信息</div>
        <div class="am-modal-bd">
            <form class="am-form am-form-horizontal" action="" id="doc-vld-msg-update" >
                <fieldset>
                    <div class="am-form-group">
                        <label for="jtcyxm" class="am-u-sm-2 am-form-label">姓名</label>
                        <div class="am-u-sm-10">
                            <input type="text" id="jtcyxm-update" minlength="2" required placeholder="请输入姓名"  data-foolish-msg="请至少输入2个字">
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label for="jtcysfz" class="am-u-sm-2 am-form-label">身份证号</label>
                        <div class="am-u-sm-10">
                            <input type="text" id="jtcysfz-update" class="js-pattern-jtcysfz" placeholder="请输入身份证号" required data-foolish-msg="请输入正确的身份证号">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="jtcydh" class="am-u-sm-2 am-form-label">电话号码</label>
                        <div class="am-u-sm-10">
                            <input type="text" id="jtcydh-update" class="js-pattern-mobile" required placeholder="请输入电话号码" data-foolish-msg="请输入正确的电话号码">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-10 am-u-sm-offset-2">
                            <button class="am-btn am-btn-default btn-loading" type="submit" data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '确定'}">确定</button>
                            <button class="am-btn am-btn-default" onclick="closeModalUpdate(event)">取消</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>


<script src="js/axios.min.js"></script>
<script src="config.js"></script>


<script>
    var userInfo;

    if ($.AMUI && $.AMUI.validator) {
        // 增加多个正则
        $.AMUI.validator.patterns = $.extend($.AMUI.validator.patterns, {
        });
        // 增加单个正则
//        $.AMUI.validator.patterns.yourpattern = /^your$/;
        $.AMUI.validator.patterns.mobile = /^(\d{3}-|\d{4}-)(\d{8}|\d{7})$/|/^1((3|5|8){1}\d{1}|70)\d{8}$/;
        $.AMUI.validator.patterns.jtcysfz =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
//        $.AMUI.validator.patterns.mobile = /^(\d{3}-|\d{4}-)(\d{8}|\d{7})$/;
    }
    /**
     * [通过参数名获取url中的参数值]
     * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
     * @param  {[string]} queryName [参数名]
     * @return {[string]}           [参数值]
     */
    function GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
    }
    $(function() {
        userInfo=GetQueryValue('userInfo');
        if(userInfo!="null"&&userInfo!=null){
            sessionStorage.setItem("userInfo",userInfo)
        }
        renderTable();
        initAddFunc();
    });

    function prePage() {
        location.href="one.html?userInfo="+userInfo;
    }
    function next() {
        location.href="three.html?userInfo="+userInfo;
    }

    function renderTable(){
        if(userInfo=="null"||userInfo==null){
            userInfo = sessionStorage.getItem("userInfo")
        }
        var userInfoObj = JSON.parse(userInfo);
        var url = config.getjtcyxx;
        var req = {
            sfzhm:userInfoObj.sfzhm
        }
        axios({
            method:'get',
            url:url,
            params: req,
            timeout: 5000
        })
            .then(function(response) {
                if(response.status == 200){
                    var data = response.data;
//                    $('#cylistTable').DataTable().destroy();
                    if(data.data.length>0){
                        $("#tablebody").empty();
                        let arr = data.data;
                        arr.map((item)=>{
                            let trhtml = "<tr>";
                            let tdhtml = '<td>'+item.jtcyxm+'</td>'+
                                '<td>'+item.jtcydh+'</td>'+
                                '<td>'+item.jtcysfz+'</td>'+
                        '<td ><button class=\"am-btn am-btn-warning am-round am-btn-xs\"  bm="'+item.bm+'" jtcydh ="'+item.jtcydh+'" jtcysfz ="'+item.jtcysfz+'" jtcyxm ="'+item.jtcyxm +'"onclick="editcyinfo(this)">修改</button><button class=\"am-btn am-btn-danger am-round am-btn-xs\"  bm="'+item.bm+'" onclick="deletecyinfo(this)">删除</button></td>';
                        trhtml +=tdhtml+"</tr>";
//                            trhtml.append(tdhtml)
                        $("#tablebody").append(trhtml);
                        })
//                        $('#cylistTable').DataTable( {
//                            data: data.data,
//                            paging: false,
//                            searching: false,
//                            sort:false,
//                            destroy: true,
//                            columns: [
//                                { data: 'jtcyxm'},
//                                { data: 'jtcydh'},
//                                { data: 'jtcysfz'}
//                            ],
//                            createdRow: function ( row, data, index ) {
//                                let html = '<td ><button class=\"am-btn am-btn-warning am-round am-btn-xs\"  bm="'+data.bm+'" jtcydh ="'+data.jtcydh+'" jtcysfz ="'+data.jtcysfz+'" jtcyxm ="'+data.jtcyxm +'"onclick="editcyinfo(this)">修改</button><button class=\"am-btn am-btn-danger am-round am-btn-xs\"  bm="'+data.bm+'" onclick="deletecyinfo(this)">删除</button></td>'
//                                $(row).append(html);
//                            }
//                        } );
                    }else{
                        let html = "<td><button >修改</button><button>删除</button></td>"
                        $('#cylistTable').DataTable( {
                            data: [],
                            paging: false,
                            searching: false,
                            sort:false,
                            columns: [
                                { data: 'jtcyxm'},
                                { data: 'jtcydh'},
                                { data: 'jtcysfz'}
                            ],
                            createdRow: function ( row, data, index ) {
                                console.log('row:',row,'data:',data,'index:',index)
                                $(row).append(html);
                            }
                        } );
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });

    }

    function initAddFunc(){
        $('#openmodalbtn').on('click', function(){
            $('#my-modal').modal();
        });

        var $form = $('#form-with-tooltip');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);

        $form.validator();

        var validator = $form.data('amui.validator');

        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);
                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });
        $('#doc-vld-msg').validator({
            submit: function(event) {
                event.preventDefault();
                var formValidity = this.isFormValid();
                if(formValidity){
                    // 验证成功的逻辑
                    let jtcyxm = $("#jtcyxm").val();
                    let jtcysfz = $('#jtcysfz').val();
                    let jtcydh = $('#jtcydh').val();
                    $('.btn-loading-example').click(function () {
                        var $btn = $(this)
                        $btn.button('loading');
                        setTimeout(function(){
                            $btn.button('reset');
                        }, 5000);
                    });

                    var $btn = $('.btn-loading');
                    $btn.button('loading');
                    if(userInfo=="null"||userInfo==null){
                        userInfo = sessionStorage.getItem("userInfo")
                    }
                    var userInfoObj = JSON.parse(userInfo);
                    var url = config.insertjtcy;
                    var req = {
                        sfzhm:userInfoObj.sfzhm,
                        jtcydh:jtcydh,
                        jtcysfz:jtcysfz,
                        jtcyxm:jtcyxm
                    }
                    axios({
                        method:'post',
                        url:url,
                        params: req,
                        timeout: 10000
                    })
                        .then(function(response) {
                            if(response.status == 200){
                                var data = response.data;
                                if(data){
                                    setTimeout(function(){
                                        $btn.button('reset');
                                        $("#jtcyxm").val("");
                                        $('#jtcysfz').val("");
                                        $('#jtcydh').val("");
                                        $('#my-modal').modal('close');
                                        renderTable();
                                    },1000)
                                }
                            }else{
                                console.log(response);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    return false;
                }else{
                    console.log('失败')
                    return false;
                    // 验证失败的逻辑
                }

            }
        });
    }

    function closeModal(e){
        e.preventDefault()
        $('#my-modal').modal('close');
    }

    function closeModalUpdate(e){
        e.preventDefault()
        $('#my-modal-update').modal('close');
    }


    //这个地方有点问题暂时提成公共变量
    let bmsss = "";

    //编辑信息
    function editcyinfo(obj){
        let dom = $(obj);
        // 验证成功的逻辑
        let jtcyxm = dom.attr('jtcyxm');
        let jtcysfz =dom.attr('jtcysfz');
        let jtcydh = dom.attr('jtcydh');
        let bm = dom.attr('bm');

        bmsss = bm;

        console.log(bm + " " + jtcyxm + " " +jtcysfz + " " +jtcydh)
        $('#my-modal-update').modal();
        $("#jtcyxm-update").val(jtcyxm);
        $('#jtcysfz-update').val(jtcysfz);
        $('#jtcydh-update').val(jtcydh);
        var $form = $('#form-with-tooltip');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);
        $form.validator();
        var validator = $form.data('amui.validator');
        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);
                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });
        $('#doc-vld-msg-update').validator({
            submit: function(event) {
                event.preventDefault();
                var formValidity = this.isFormValid();
                if(formValidity){
                    // 验证成功的逻辑
                    let jtcyxm = $("#jtcyxm-update").val();
                    let jtcysfz = $('#jtcysfz-update').val();
                    let jtcydh = $('#jtcydh-update').val();
                    $('.btn-loading-example').click(function () {
                        var $btn = $(this)
                        $btn.button('loading');
                        setTimeout(function(){
                            $btn.button('reset');
                        }, 5000);
                    });

                    var $btn = $('.btn-loading');
                    $btn.button('loading');
                    if(userInfo=="null"||userInfo==null){
                        userInfo = sessionStorage.getItem("userInfo")
                    }
                    var url = config.editjtcy;
                    var req = {
                        bm:bmsss,
                        jtcydh:jtcydh,
                        jtcysfz:jtcysfz,
                        jtcyxm:jtcyxm
                    }
                    axios({
                        method:'put',
                        url:url,
                        params: req,
                        withCredentials:false
                    })
                        .then(function(response) {
                            if(response.status == 200){
                                var data = response.data;
                                if(data){
                                    $btn.button('reset');
                                    $('#my-modal-update').modal('close');
                                    renderTable();
                                }
                            }else{
                                console.log(response);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    return false;
                }else{
                    console.log('失败')
                    return false;
                    // 验证失败的逻辑
                }

            }
        });
    }

    function deletecyinfo(obj){
        let bm = $(obj).attr('bm');
        var url = config.deletejtcy;
        var req = {
            bm:bm
        }
        axios({
            method:'delete',
            url:url,
            params: req
        })
            .then(function(response) {
                if(response.status == 200){
                    var data = response.data;
                    if(data.data){
                        renderTable();
                    }
                }else{
                    console.log(response.data.data);
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }

</script>
</body>

</html>
